<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
  <!-- import CSS -->
  <link rel="stylesheet" href="vue-hash-calendar.css">
  <style>
    *{margin:0}
 
  </style>
</head>
<body>
  <div id="app">

      <vue-hash-calendar :visible.sync="visible" picker-type="date" 
      format="YY/MM/DD"
      v-on:change="calendarChange"
      :theme-color="calendarStyle"
      :is-show-week-view="isShowWeekView" :is-show-arrow="isShowArrow" :change-year-fast="changeYearFast">
        <div slot="day" slot-scope="scope" style="text-align: center;position: relative;width: 100%;height: 100%;">
          <span v-for="(item,index) in dayList" class="tips" v-if="isShowTips(scope.date,item)"></span>
          <div v-if="scope.extendAttr.isToday" style="line-height:0.6rem;">今</div>
          <div v-else style="line-height: 0.3rem;font-size:0.2rem;">
            <p >{{scope.date.day}}</p>
            <p >{{timeOrnl(scope.date)}}</p>
 
          </div>
        </div>
      </vue-hash-calendar>

    <div style="height:2rem;line-height:0.7rem;background:#999">
      <p style="font-size:0.25rem">{{selectDay}}</p>
      <p style="font-size:0.25rem">{{selectDay}}</p>
      <p style="font-size:0.25rem">{{selectDay}}</p>
    </div>

    
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="./vue.js"></script>
  <!-- import JavaScript -->
  <script src="vue-hash-calendar.umd.min.js"></script>
  <script src="rem.js"></script> 
  <script src="calendar.js"></script>
  <script>

    Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o){
    if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
    }
    return fmt;
}


    new Vue({
      el: '#app',
      data: function() {
        return { 
            visible: true,
            isShowWeekView:true,
            isShowArrow:true,
            changeYearFast:true,
         
            calendarStyle:{ 'main-color': '#fff'},
            // f37b2c
            // { 'main-color': string; 'bg-color': string; 'main-font-color': string; 'vice-font-color': string; 'disabled-bg-color': string; 'disabled-font-color': string;}	
            selectDay:'',

            dayList:['2022/01/08','2022/01/09'],


          }
      },
      methods:{
        //输入时间的那个月的第一天
          getCurrentMonthFirst: function (date){
            date.setDate(1);
            var month = parseInt(date.getMonth() + 1);
            var day = date.getDate();
            if(month < 10) {
                month = '0' + month
            }
            if(day < 10) {
                day = '0' + day
            }
            return date.getFullYear() + '/' + month + '/' + day;
        },
        //输入时间的那个月的最后一天
        getCurrentMonthLast: function(date){
            var currentMonth = date.getMonth();
            var nextMonth = ++currentMonth;
            var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
            var oneDay = 1000 * 60 * 60 * 24;
            var lastTime = new Date(nextMonthFirstDay - oneDay);
            var month = parseInt(lastTime.getMonth() + 1);
            var day = lastTime.getDate();
            if(month < 10) {
                month = '0' + month
            }
            if(day < 10) {
                day = '0' + day
            }
            return date.getFullYear() + '/' + month + '/' + day;
        },
        calendarChange:function(event){
          this.selectDay = event;
          var currentMonthFirst = this.getCurrentMonthFirst(new Date(new Date(event).getFullYear(), new Date(event).getMonth()-1, 1))
          var currentMonthLast = this.getCurrentMonthLast(new Date(new Date(event).getFullYear(), new Date(event).getMonth()+1, 1))
          console.log(currentMonthFirst,currentMonthLast)
        },
        isShowTips(time,timeif){
          var year = time.year;
          var month = time.month;
          var day =time.day;
          var newTime = (new Date(year,month,day)).Format("yyyy/MM/dd");
          if(newTime == timeif){
            return true;
          }else{
            return false;
          }
        },
        //时间转农历
        timeOrnl: function (time) {
          var year = time.year;
          var month = time.month.length == 1 ? '0' + time.month+1 : time.month+1;
          var day = time.day.length == 1 ? '0' + time.day : time.day;
          var okTime = calendar.solar2lunar(year, month, day).IDayCn;
          return okTime;
        },
      }
    })
  </script>
  <style>
    .year-body-item-content.is_checked{
      color:#f37b2c !important;
    }
    .calendar_day_checked *{
      color:#f37b2c !important;
    }
    .calendar_confirm {
      color:#f37b2c !important;
    }
    .calendar_first_today{
      color:#191919 !important;
    }
    .tips{
      position: absolute;
      display: inline-block;
      width: 0.12rem;
      height: 0.12rem;
      background: red;
      right: 0;
      top: 0;
      border-radius: 0.12rem;
    }
    .hash-calendar p, .hash-calendar span{
      letter-spacing: 0px;
    }
  </style>
</html>